<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
  组件化开发：
       什么是组件： 将实现特定需求的代码（html，css js,静态资源），整合在一起形成了一个组件  .vue
  为什么是使用组件： 实现代码复用  减少代码冗余     为后续实现vue中单页面化开发奠定基础
      index.html  spa
       头部组件    head.vue
      导航组件     nav.vue
      轮播组件     lb.vue
      登录组件     login.vue
      注册组件     register.vue     根据用户的访问路径  动态的渲染组件到index.html  路由

      组件  + 路由   =   spa

  组件的分类
      1. 作用域分类
           1.1  局部组件  ： 组件只能在注册的位置进行使用
           1.2  全局组件  ：  注册在Vue的身上
      2. 编写形式
           2.1  非单文件组件 ：  在一个文件中编写了多个组件
           2.2  单文件组件  ：  在一个文件中自定义一个组件    .vue  编译 webpack    ->  浏览器能识别的 html  css  js
                                                          java  .java   .class  -> jvm
-->

<div id="app">
    <h3>学生信息展示</h3>
<!--    使用组件  组件标签-->
    <student-info></student-info>
    <hr>
    <h3>教师信息展示</h3>
    <Teacher></Teacher>
</div>

<script>
    /*
    *  使用组件的步骤
    *    1.定义组件
    *      组件的命名方式：
    *        1.  使用 kebab-case
    *             student-info
    *        2.   PascalCase
    *             StudentInfo
    *       当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
    *       也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
    *       注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
    *    2.注册组件
    *
    *    3.使用组件
    *
    *    组件是可复用的 Vue 实例，且带有一个名字，因为组件是可复用的 Vue 实例，
    *    所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
    *    仅有的例外是像 el 这样根实例特有的选项,  组件需要复用，所用组件不属于某个特定的容器
    *
    * */

    let student = {
        template:`
               <div class="box">
                    <h5>姓名：张三</h5>
                    <h5>年龄：20</h5>
                    <h5>专业：Java</h5>
                </div>
        `
    }

    let teacher = {
        template:`
               <div class="box">
                    <h5>姓名：jack</h5>
                    <h5>年龄：30</h5>
                     <h5>专业：Java</h5>
                    <student-info></student-info>
                </div>
        `,
        components:{
            'student-info':student
        }
    }

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components:{  // 组件注册  组件名：组件对象  es6  student:student
             'student-info':student,
             // 'studentinfo':student
            teacher
        }
    })
</script>
</body>
</html>